iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
Modern Web

遺留系統重構 - 從 MEAN Stack 轉移到 go-vue-postgresql系列 第 20

Day 20 : 前端路由 - 使用 vue-route 來控制

  • 分享至 

  • xImage
  •  

在前後端分離之後,前端頁面的路由控制變成為重要的課題,
vue-cli 產生的專案中,其中能夠選擇是否使用 vue-route

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在專案中 main.js 裡,將路由元件引入。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

在 router.js 中,有使用普通載入、和緩載入兩種路由方式,
並在屬性 routes 下定義路由,
當路由改變的時候,切換成指定的元件。

// app.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

標籤 router-link 是用來切換路由用的原生元件,是標籤 a 的封裝。
標籤 router-view 放置切換後元件嵌入點,用來呈現各元件。
如此就完成了前端路由的作業。

vue 發展到現在,已經非常完善,
在開發上有很完整的工具鍊,
對於給新手使用,有良好的學習曲線。


上一篇
Day 19 : 排程 - 用 goroutine 來處理資料
下一篇
Day 21 : 檢查 - 在 commit 之前檢查前端程式碼
系列文
遺留系統重構 - 從 MEAN Stack 轉移到 go-vue-postgresql30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言